<!--
 * @Author: giteezr 2250368646@qq.com
 * @Date: 2024-02-27 09:29:16
 * @LastEditors: giteezr 2250368646@qq.com
 * @LastEditTime: 2024-04-02 11:41:50
 * @FilePath: \vue3+nodeJs\houtaiguanli\management-system\src\views\sweepercar\global\components\popups\targetanalysis\targetanalysis.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 指标分析 -->
  <el-tabs v-model="data.activeName" type="border-card" class="targetanalysis">
    <el-tab-pane label="保洁时间间隔" name="0">
      <TargetStatisticsHeadScore
        v-if="data.activeName == 0"
        :carData="data.headScoreObj"
      ></TargetStatisticsHeadScore>
    </el-tab-pane>
    <el-tab-pane label="道路清洁效果" name="1">
      <TargetStatisticsBackScore
        v-if="data.activeName == 1"
        :carData="data.backscoreObj"
      ></TargetStatisticsBackScore>
    </el-tab-pane>
    <el-tab-pane label="洒落物统计" name="2">
      <TargetStatisticsRubbishStatistics
        :carData="data.rubbishStatisticsObj"
        v-if="data.activeName == 2"
      ></TargetStatisticsRubbishStatistics>
    </el-tab-pane>
    <el-tab-pane label="保洁能力" name="3">
      <TargetStatisticsConScore
        :carData="data.statisticsConScoreObj"
        v-if="data.activeName == 3"
      ></TargetStatisticsConScore>
    </el-tab-pane>
    <el-tab-pane label="重点保洁路段" name="4">
      <TargetStatisticsImportantRoad
        :carData="data.importantRoadObj"
        v-if="data.activeName == 4"
      ></TargetStatisticsImportantRoad>
    </el-tab-pane>
    <el-tab-pane label="衰减曲线分析" name="5">
      <TargetStatisticsscoreAttenuation
        :carData="data.scoreAttenuationObj"
        v-if="data.activeName == 5"
      ></TargetStatisticsscoreAttenuation>
    </el-tab-pane>
    <el-tab-pane label="保洁趋势分析" name="6">
      <TargetStatisticsscoreComparison
        :carData="data.scoreComparisonObj"
        v-if="data.activeName == 6"
      ></TargetStatisticsscoreComparison>
    </el-tab-pane>
    <el-tab-pane label="经济效益" name="7">
      <TargetStatisticsEconomic
        :carData="data.statisticsEconomicObj"
        v-if="data.activeName == 7"
      ></TargetStatisticsEconomic>
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import {
  getTtargetStatisticsHeadScore,
  getTargetstatisticsbackscore,
  getTargetstatisticsrubbishstatistics,
  getTargetstatisticsconscore,
  getTargetstatisticsimportantroad,
  getScoreattenuation,
  getScoreComparison,
  getWongetrkqueryscorejudge,
} from "@/api/sweepercar/global";
import { onMounted, reactive, nextTick } from "vue";
import TargetStatisticsHeadScore from "./children/targetStatisticsHeadScore.vue";
import TargetStatisticsConScore from "./children/targetStatisticsConScore.vue";
import TargetStatisticsEconomic from "./children/targetStatisticsEconomic.vue";
import TargetStatisticsRubbishStatistics from "./children/targetStatisticsRubbishStatistics.vue";
import TargetStatisticsscoreComparison from "./children/targetStatisticsscoreComparison.vue";
import TargetStatisticsscoreAttenuation from "./children/targetStatisticsscoreAttenuation.vue";
import TargetStatisticsImportantRoad from "./children/targetStatisticsImportantRoad.vue";
import TargetStatisticsBackScore from "./children/targetStatisticsBackScore.vue";
let data = reactive({
  activeName: 0,
  headScoreObj: {},
  backscoreObj: {},
  rubbishStatisticsObj: {},
  statisticsConScoreObj: {},
  importantRoadObj: {},
  scoreAttenuationObj: {},
  scoreComparisonObj: {},
  statisticsEconomicObj: {},
});
// 初始化页面数据
onMounted(() => {
  nextTick(() => {
    headScoreClick();
    backscoreClick();
    rubbishStatisticsClick();
    statisticsconscoreClick();
    importantRoadClick();
    scoreAttenuationClick();
    scoreComparisonClick();
    statisticsEconomicClick();
  });
});
// 指标分析-保洁时间间隔
const headScoreClick = async () => {
  const res = await getTtargetStatisticsHeadScore();
  const { status, message } = res;
  if (status === 0) {
    4;
    let obj = { avgscore: [], num: [], time: [], totalnum: [] };
    res.data.forEach((x) => {
      obj.avgscore.push(x.avgscore);
      obj.num.push(x.num);
      obj.time.push(x.time);
      obj.totalnum.push(x.totalnum);
    });
    data.headScoreObj = obj;
  }
};
//  指标分析-道路清洁效果
const backscoreClick = async () => {
  const res = await getTargetstatisticsbackscore();
  const { status, message } = res;
  if (status === 0) {
    4;
    let obj = { avgscore: [], num: [], time: [], totalnum: [] };
    res.data.forEach((x) => {
      obj.avgscore.push(x.avgscore);
      obj.num.push(x.num);
      obj.time.push(x.time);
      obj.totalnum.push(x.totalnum);
    });
    data.backscoreObj = obj;
  }
};
//  指标分析-洒落物统计
const rubbishStatisticsClick = async () => {
  const res = await getTargetstatisticsrubbishstatistics();
  const { status, message } = res;
  if (status === 0) {
    console.log(res.data)
    let obj = { name: [], value: [] };
    res.data.forEach((x) => {
      obj.name.push(x.name);
      obj.value.push(x.value);
    });
    data.rubbishStatisticsObj = obj;
  }
};
//  指标分析-保洁能力
const statisticsconscoreClick = async () => {
  const res = await getTargetstatisticsconscore();
  const { status, message } = res;
  if (status === 0) {
    let obj = { avgscore: [], num: [], time: [], totalnum: [] };
    res.data.forEach((x) => {
      obj.avgscore.push(x.avgscore);
      obj.num.push(x.num);
      obj.time.push(x.time);
      obj.totalnum.push(x.totalnum);
    });
    data.statisticsConScoreObj = obj;
  }
};
//  指标分析-重点保洁路段
const importantRoadClick = async () => {
  const res = await getTargetstatisticsimportantroad();
  const { status, message } = res;
  if (status === 0) {
    let obj = { name: [], value: [] };
    res.data.forEach((x) => {
      obj.name.push(x.roadLargeNum);
      obj.value.push(x.score);
    });
    data.importantRoadObj = obj;
  }
};
//  指标分析-衰减曲线分析
const scoreAttenuationClick = async () => {
  const res = await getScoreattenuation();
  const { status, message } = res;
  if (status === 0) {
    let obj = {time: [], scoreBack: [], scoreNotClean: []}
    res.data.forEach((x) => {
      obj.time.push(x.time);
      obj.scoreBack.push(x.scoreNotClean);
      obj.scoreNotClean.push(x.scoreNotClean);
    });
    data.scoreAttenuationObj = obj;
  }
};
//  指标分析-保洁趋势分析
const scoreComparisonClick = async () => {
  const res = await getScoreComparison();
  const { status, message } = res;
  if (status === 0) {
    let obj = {time: [], scoreBack: [], scoreNotClean: []}
    res.data.forEach((x) => {
      obj.time.push(x.time);
      obj.scoreBack.push(x.scoreNotClean);
      obj.scoreNotClean.push(x.scoreNotClean);
    });
    data.scoreComparisonObj = obj;
  }
};
//  指标分析-经济效益
const statisticsEconomicClick = async () => {
  const res = await getWongetrkqueryscorejudge();
  const { status, message } = res;
  if (status === 0) {
    data.statisticsEconomicObj = res.data.list;
  }
};
</script>
<style lang="less" scoped>
.targetanalysis {
  height: 90% !important;
  border: 0 !important;

  /deep/ .el-tabs__content {
    height: 100% !important;
  }

  /deep/ .el-tabs__nav-wrap {
    background: #051b31 !important;
  }

  /deep/ .el-tabs__item {
    margin-right: 1rem;
    background: #0a325a;
    border: 0 !important;
    color: #fff;
  }

  /deep/ .el-tabs__content {
    background: #051b31;
    color: #fff;
  }

  /deep/ .is-active {
    background: url("../../../../../../assets/images/sweepercar/background.png")
      no-repeat;
    background-color: #051b31 !important;
    background-size: 100% 100%;
    border: 0 !important;
    color: #05b6f8;
  }

  /deep/ .el-table * {
    background: #051b31 !important;
    color: #fff;
    border: 0 !important;
  }

  /deep/ .el-table__header * {
    background: #104983 !important;
    height: 20px;
    line-height: 20px;
  }

  /deep/ .el-table__row * {
    // background: #104983 !important;
    height: 20px;
    line-height: 20px;
  }
}

.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #051b31 !important;
}

// 详情
.el-tabs__content > div {
  height: 100%;
}
</style>

